<template>
    <div class="user-follow">
        <!-- 导航栏 -->
        <van-nav-bar left-arrow @click-left="$router.back()">
            <van-tabs
                slot="title"
                v-model="active"
                background="#3296fa"
                color="#fff"
                title-inactive-color="#fff"
                title-active-color="#fff"
                line-width="56"
            >
                <van-tab
                    :title="item.title"
                    v-for="(item, index) in tabs"
                    :key="index"
                >
                    <follow-list :fn="item.fn" v-slot="{ item }" />
                </van-tab>
            </van-tabs>
        </van-nav-bar>
    </div>
</template>

<script>
import { getUserFollow, getUserFans } from '@/api/user'
import FollowList from './components/follow-list'

export default {
    name: 'UserFollow',
    components: {
        FollowList
    },
    props: {
        userId: {
            type: [String, Number, Object],
            required: true
        },
        // 关注 / 粉丝
        type: String
    },
    data () {
        return {
            active: ['follow', 'fans'].indexOf(this.type),
            tabs: [{ title: '关注', fn: getUserFollow }, { title: '粉丝', fn: getUserFans }]
        }
    },
    created () { },
    mounted () { },
    methods: {},
    computed: {},
    watch: {}
}
</script>

<style scoped>
.van-tabs /deep/ .van-tabs__wrap {
    width: 225px;
}
</style>
